<style>
@media print {
  ._wz_deptSystemOperateDetails1 {
    -webkit-print-color-adjust: exact;
    height: inherit !important;
    font-size: 12px !important;
  }
}
</style>
<template>
  <div class="_wz_deptSystemOperateDetails1" ref="deptSystemOperateDetails">
    <table cellpadding="0" cellspacing="0" border="0">
      <colgroup>
        <col width="13%">
        <col width="20%">
        <col width="13%">
        <col width="20%">
        <col width="13%">
        <col width="20%">
      </colgroup>
      <tbody>
      <tr>
        <td style="font-weight: 600;position:relative;" colspan="6">
          生产操作规程
          <Button type="primary" @click="printTest" class="no-print" style="position: absolute;right: 10px;top: 8px;">
            打印
          </Button>
        </td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">运输企业</td>
        <td colspan="5">{{!!formData.deptName?formData.deptName:'--'}}</td>
      </tr>
      <tr>
        <td style="font-weight: 600;position:relative;" colspan="6">安全行车操作规程</td>
      </tr>
      <tr>
        <td colspan="2">
          <div class="demo-upload-list">
            <viewer style="width: 100%;height: 100%; display: flex;align-items: center;justify-content: center;">
              <img :src="!!drivingImg.url?drivingImg.url:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
            </viewer>
          </div>
        </td>
        <td colspan="4">
          <div class="ql-snow">
            <div class="ql-editor" v-html="!!formData.drivingContent?formData.drivingContent:'--'"></div>
          </div>
        </td>
      </tr>
      <tr>
        <td style="font-weight: 600;position:relative;" colspan="6">动态监控操作规程</td>
      </tr>
      <tr>
        <td colspan="2">
          <div class="demo-upload-list">
            <viewer style="width: 100%;height: 100%; display: flex;align-items: center;justify-content: center;">
              <img :src="!!monitorImg.url?monitorImg.url:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
            </viewer>
          </div>
        </td>
        <td colspan="4">
          <div class="ql-snow">
            <div class="ql-editor" v-html="!!formData.monitorContent?formData.monitorContent:'--'"></div>
          </div>
        </td>
      </tr>
      <tr>
        <td style="font-weight: 600;position:relative;" colspan="6">特殊路段操作规程</td>
      </tr>
      <tr>
        <td colspan="2">
          <div class="demo-upload-list">
            <viewer style="width: 100%;height: 100%; display: flex;align-items: center;justify-content: center;">
              <img :src="!!roadImg.url?roadImg.url:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
            </viewer>
          </div>
        </td>
        <td colspan="4">
          <div class="ql-snow">
            <div class="ql-editor" v-html="!!formData.roadContent?formData.roadContent:'--'"></div>
          </div>
        </td>
      </tr>
      <tr>
        <td style="font-weight: 600;position:relative;" colspan="6">特殊时段操作规程</td>
      </tr>
      <tr>
        <td colspan="2">
          <div class="demo-upload-list">
            <viewer style="width: 100%;height: 100%; display: flex;align-items: center;justify-content: center;">
              <img :src="!!timeImg.url?timeImg.url:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
            </viewer>
          </div>
        </td>
        <td colspan="4">
          <div class="ql-snow">
            <div class="ql-editor" v-html="!!formData.timeContent?formData.timeContent:'--'"></div>
          </div>
        </td>
      </tr>
      <tr>
        <td style="font-weight: 600;position:relative;" colspan="6">性能检测操作规程</td>
      </tr>
      <tr>
        <td colspan="2">
          <div class="demo-upload-list">
            <viewer style="width: 100%;height: 100%; display: flex;align-items: center;justify-content: center;">
              <img :src="!!detectionImg.url?detectionImg.url:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
            </viewer>
          </div>
        </td>
        <td colspan="4">
          <div class="ql-snow">
            <div class="ql-editor" v-html="!!formData.detectionContent?formData.detectionContent:'--'"></div>
          </div>
        </td>
      </tr>
      <tr>
        <td style="font-weight: 600;position:relative;" colspan="6">车辆维护操作规程</td>
      </tr>
      <tr>
        <td colspan="2">
          <div class="demo-upload-list">
            <viewer style="width: 100%;height: 100%; display: flex;align-items: center;justify-content: center;">
              <img :src="!!maintainImg.url?maintainImg.url:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
            </viewer>
          </div>
        </td>
        <td colspan="4">
          <div class="ql-snow">
            <div class="ql-editor" v-html="!!formData.maintenanceContent?formData.maintenanceContent:'--'"></div>
          </div>
        </td>
      </tr>

      </tbody>
    </table>


    <Spin size="large" fix v-if="spinShow"></Spin>

  </div>
</template>
<script>

import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

export default {
  props: ['selectData'],//接收来自父组件的数据
  data() {
    return {
      spinShow: false,//本页加载
      formData: {
      },

      drivingImg: {data: null,url: ''},//车辆维护制度图片
      monitorImg: {data: null,url: ''},//技术档案制度图片
      roadImg: {data: null,url: ''},//特殊路段操作规程图片
      timeImg: {data: null,url: ''},//特殊时段操作规程图片
      detectionImg: {data: null,url: ''},//性能检测操作规程图片
      maintainImg: {data: null,url: ''},//车辆维护操作规程图片

    }
  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    var that = this;

      that.formData = that.selectData;
      //车辆维护制度图片
      that.drivingImg = {
        data: null,
        url: !!that.formData.drivingImg ? that.apiUrl.imgUrl + that.formData.drivingImg : ''
      };
      //技术档案制度图片
      that.monitorImg = {
        data: null,
        url: !!that.formData.monitorImg ? that.apiUrl.imgUrl + that.formData.monitorImg : ''
      };
      //特殊路段操作规程图片
      that.roadImg = {
        data: null,
        url: !!that.formData.roadImg ? that.apiUrl.imgUrl + that.formData.roadImg : ''
      };
      //特殊时段操作规程图片
      that.timeImg = {
        data: null,
        url: !!that.formData.timeImg ? that.apiUrl.imgUrl + that.formData.timeImg : ''
      };
      //性能检测操作规程图片
      that.detectionImg = {
        data: null,
        url: !!that.formData.detectionImg ? that.apiUrl.imgUrl + that.formData.detectionImg : ''
      };
      //车辆维护操作规程图片
      that.maintainImg = {
        data: null,
        url: !!that.formData.maintainImg ? that.apiUrl.imgUrl + that.formData.maintainImg : ''
      };

  },
  methods: {//执行的方法
    printTest() {
      this.$print(this.$refs.deptSystemOperateDetails) // 使用
    },
  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
._wz_deptSystemOperateDetails1 {
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;

  >table {
    table-layout:fixed;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 12px !important;

    td {
      min-width: 0;
      height: 40px;
      box-sizing: border-box;
      text-align: left;
      text-overflow: ellipsis;
      border: 1px solid #515a6e;
      padding: 0 10px;
      word-break: break-word;
    }
  }

  .demo-upload-list {
    margin: 5px auto;
    width: 195px;
    height: 140px;
    text-align: center;
    line-height: 140px;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 0 0 0;

    img {
      min-height: 30%;
      max-height: 90%;
      min-width: 30%;
      max-width: 90%;
      //width: 100%;
      //height: 100%;
    }
  }
}
</style>
